<template>
  <div class="box">
    <div class="basicInfo">
      <el-page-header :icon="ArrowLeft" style="margin-bottom: 20px" @back="comeback">
        <template #content>
          <span class="text-large font-600 mr-3">基本信息</span>
        </template>
      </el-page-header>
      <el-descriptions title="">
        <el-descriptions-item label="订单编码">{{ orderInfoData.orderCode }}</el-descriptions-item>
        <el-descriptions-item label="供应商名称">{{ orderInfoData.supplierName }}</el-descriptions-item>
        <el-descriptions-item label="供应商编码">{{ orderInfoData.supplierCode }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <div
            style="margin-bottom: 3px"
            :class="
              orderInfoData.state == '1'
                ? 'confirmed'
                : orderInfoData.state == '2'
                ? 'sectionfirmed'
                : orderInfoData.state == '3'
                ? 'declined'
                : orderInfoData.state == '4'
                ? 'toBeConfirmed'
                : 'draftfirmed'
            "
          />
          {{
            orderInfoData.state == '1'
              ? '全部确认'
              : orderInfoData.state == '2'
              ? '部分确认'
              : orderInfoData.state == '3'
              ? '已拒绝'
              : orderInfoData.state == '4'
              ? '待确认'
              : '草稿'
          }}
        </el-descriptions-item>
        <el-descriptions-item label="订单金额(不含税)">
          <span class="iconView">
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </span>
          {{ orderInfoData.totalPriceWithTax }}
        </el-descriptions-item>
        <el-descriptions-item label="订单金额(含税)">
          <span class="iconView">
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </span>
          {{ orderInfoData.totalPriceWithoutTax }}
        </el-descriptions-item>
        <el-descriptions-item label="币种">{{ orderInfoData.orderCurrency }}</el-descriptions-item>
        <el-descriptions-item label="采购组织">{{ orderInfoData.purchaseOrgDesc }}</el-descriptions-item>
        <el-descriptions-item label="采购组">{{ orderInfoData.purchaseGroupDesc }}</el-descriptions-item>
        <el-descriptions-item label="订单类型">{{ orderInfoData.orderTypeDesc }}</el-descriptions-item>
        <el-descriptions-item label="采购企业编码">{{ orderInfoData.companyCode }}</el-descriptions-item>
        <el-descriptions-item label="采购企业名称">{{ orderInfoData.companyName }}</el-descriptions-item>
        <el-descriptions-item label="需要确认">
          <div style="margin-bottom: 3px" :class="orderInfoData.needConfirm == '0' ? 'declined' : 'confirmed'" />
          {{ orderInfoData.needConfirm == '1' ? '是' : '否' }}
        </el-descriptions-item>
        <el-descriptions-item label="需要提供ASN">
          {{ orderInfoData.publishAsn == '1' ? '发布' : '不发布' }}
        </el-descriptions-item>
        <el-descriptions-item label="订单创建日期">{{ orderInfoData.createTime }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="vertical">
        <el-descriptions-item label="订单标识">{{ orderInfoData.orderDescription }}</el-descriptions-item>
        <el-descriptions-item label="订单备注">{{ orderInfoData.orderNotes }}</el-descriptions-item>
        <el-descriptions-item label="附件">--</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="orderDetails">
      <div class="orderlist">
        <div class="title">订单明细</div>
        <el-table
          :data="detailData"
          border
          :header-cell-style="{
            background: '#f8f8f9',
            color: '#555d70',
            fontWeight: 700,
            fontSize: 16 + 'px'
          }"
        >
          <el-table-column prop="id" label="序号" width="70" />
          <el-table-column prop="item_state" label="行状态" width="130">
            <template #default="scope">
              <span class="status">
                <div
                  :class="
                    scope.row.item_state == 0 ? 'toBeConfirmed' : scope.row.item_state == 1 ? 'confirmed' : 'declined'
                  "
                />
                {{ scope.row.item_state == 0 ? '待确认' : scope.row.item_state == 1 ? '已确认' : '已拒绝' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="item_no" label="行项目" width="110" />
          <el-table-column prop="material_name" label="物料名称" width="190">
            <template #default="scope">
              <span style="color: #729e61">{{ scope.row.material_name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="要求的数量" width="110" />
          <el-table-column prop="confirmed_quantity" label="确认的数量" width="110">
            <template #default="scope">
              <span class="iconTips">
                <el-icon>
                  <Warning />
                </el-icon>
                {{ scope.row.confirmed_quantity }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="deliver_date" label="要求的交货日期" width="150" />
          <el-table-column prop="confirmed_delivery_date" label="确认的交货日期" width="150" />
          <el-table-column prop="price" label="要求的单价(不含税)" width="190" />
          <el-table-column prop="confirmed_price_without_tax" label="确认的单价(不含税)" width="190">
            <template #default="scope">
              <span class="iconTips">
                <el-icon>
                  <Warning />
                </el-icon>
                {{ scope.row.confirmed_quantity }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="tax_included_or_not" label="是否含税" width="100" />
          <el-table-column prop="tax_rate" label="税率" width="110" />
          <el-table-column prop="requested_price_with_tax" label="要求的单价(含税)" />
          <el-table-column prop="confirmed_price_with_tax" label="确认的单价(含税)">
            <template #default="scope">
              <span class="iconTips">
                <el-icon>
                  <Warning />
                </el-icon>
                {{ scope.row.confirmed_quantity }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { orderInfoList } from '@/api/order'

const router = useRouter()
const route = useRoute()

//订单明细数据
const detailData = ref([
  {
    id: 1,
    item_state: 0,
    item_no: '0001',
    material_name: '大车行程限位器',
    number: 12,
    confirmed_quantity: '1',
    deliver_date: '2024-09-14',
    confirmed_delivery_date: '2024-09-14',
    price: '21',
    confirmed_price_without_tax: '2',
    tax_included_or_not: 1,
    tax_rate: '0.09',
    requested_price_with_tax: '22.89',
    confirmed_price_with_tax: '22.89'
  }
])

//基本信息数据
interface order {
  orderCode: string
  supplierName: string
  supplierCode: string
  state: string
  totalPriceWithTax: string
  totalPriceWithoutTax: string
  orderCurrency: string
  purchaseOrgDesc: string
  purchaseGroupDesc: string
  orderTypeDesc: string
  companyCode: string
  companyName: string
  needConfirm: string
  publishAsn: string
  createTime: string
  orderDescription: string
  orderNotes: string
}
const orderInfoData = ref<order>({
  orderCode: '',
  supplierName: '',
  supplierCode: '',
  state: '',
  totalPriceWithTax: '',
  totalPriceWithoutTax: '',
  orderCurrency: '',
  purchaseOrgDesc: '',
  purchaseGroupDesc: '',
  orderTypeDesc: '',
  companyCode: '',
  companyName: '',
  needConfirm: '',
  publishAsn: '',
  createTime: '',
  orderDescription: '',
  orderNotes: ''
})

//获取订单信息
onMounted(() => {
  orderAcquire()
})
const orderAcquire = () => {
  const data = {
    currentPage: 1,
    pageSize: 1,
    supplierCode: route.query.id
  }
  orderInfoList(data).then((data) => {
    orderInfoData.value = data.data.records[0]
    // console.log(route.query.id, data.data.records)
  })
}
const comeback = () => {
  router.push({
    name: 'orderPage',
    query: {}
  })
}
</script>

<style lang="scss" scoped>
.box {
  background: #f8f8f8;
  width: 100%;
  height: 89vh;
  box-sizing: border-box;
  padding: 15px 0;

  .basicInfo {
    width: 98%;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;
    box-sizing: border-box;
    margin-bottom: 30px;

    .iconView {
      i {
        color: green;
        margin-left: -20px;
      }
    }
  }

  .orderDetails {
    width: 98%;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;

    .iconTips {
      display: flex;

      i {
        margin-right: 10px;
        color: #f29b56;
        font-size: 16px;
      }
    }

    .orderlist {
      .title {
        font-size: 18px;
        margin-bottom: 20px;
        font-weight: 700;
      }

      .status {
        display: flex;
        align-items: center;
      }
    }
  }
}

/* 全部确认 */
.confirmed {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  background-color: #578c43;
  margin-right: 10px;
}
/* 部分确认 */
.sectionfirmed {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  background-color: #a7e08c;
  margin-right: 10px;
}
/* 已拒绝 */
.declined {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  background-color: #f56c6c;
  margin-right: 10px;
}
/* 待确认 */
.toBeConfirmed {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  background-color: #e6a23c;
  margin-right: 10px;
}
/* 草稿 */
.draftfirmed {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  background-color: #909399;
  margin-right: 10px;
}

::v-deep .basicInfo .el-descriptions__label:not(.is-bordered-label) {
  display: inline-block;
  width: 111px;
  color: #ababab;
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  // font-size: 14px;
}

::v-deep
  .el-descriptions--small
  .el-descriptions__body
  .el-descriptions__table:not(.is-bordered)
  .el-descriptions__cell {
  font-size: 15px;
}

::v-deep .vertical {
  tr {
    display: flex;
    flex-direction: column;
  }
}

::v-deep .el-descriptions--small .el-descriptions__header .el-descriptions__title {
  font-size: 18px;
  margin-bottom: 10px;
}

::v-deep .el-table--small .cell {
  padding: 7px 8px;
  font-size: 15px;
}
</style>
